웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리의 after(), before() 메소드를 사용하면 원하는 문서를 쉽게 이동할 수 있습니다. 자바스크립트의 append() 또는 appendTo()를 생각하시면 좀 더 쉽게 이해하실 수 있으실겁니다.
$('기준이 되는 요소').after('이동할 요소');
$('기준이 되는 요소').before('이동할 요소');
사용방법은 위와 같으며 기준이 되는 요소의 앞 또는 뒤에 이동할 요소가 옮겨지게 됩니다. 그럼 좀 더 자세히 알아보기 위해 아래 예제를 참고해보세요.
; 만약 연속된 3개의 요소가 있다고 합니다. 맨 뒤의 요소를 맨 앞으로 이동시키려면 어떻게 해야할까요? before() 메소드를 사용하면 가능합니다.
<html>
<head>
<style type="text/css">
.testEle{ width:60px; height:60px; background: #f00; margin: 2px; test-align:center; color: #fff;display:inline-block; text-align:center;}
.testEle1 {background:#0f0;}
.testEle2 {background:#00f;}
</style>
</head>
<body>
<div id="test1" class="testEle testEle1">1</div>
<div id="test2" class="testEle testEle2">2</div>
<div id="test3" class="testEle testEle3">3</div>
<button id="testBefore" type="button">Before() Example Click!</button>
</body>
<script type="text/javascript">
$("#testBefore").click(function() {
$("#test1").before($("#test3"));
});
// id값 test3인 요소를 test1의 앞으로 이동시킴
</script>
</html>
; 위 예제와는 달리 연속된 3개의 요소의 맨 앞의 요소를 맨 뒤로 이동시키기 위해 after() 메소드를 사용합니다.
<html>
<head>
<style type="text/css">
.testEle{ width:60px; height:60px; background: #f00; margin: 2px; test-align:center; color: #fff;display:inline-block; text-align:center;}
.testEle1 {background:#0f0;}
.testEle2 {background:#00f;}
</style>
</head>
<body>
<div id="test1" class="testEle testEle1">1</div>
<div id="test2" class="testEle testEle2">2</div>
<div id="test3" class="testEle testEle3">3</div>
<button id="testAfter" type="button">After() Example Click!</button>
</body>
<script type="text/javascript">
$("#testAfter").click(function() {
$("#test3").after($("#test1"));
});
// id값 test1인 요소를 test3의 뒤로 이동시킴
</script>
</html>
여기서 가장 주의할 점은 무엇보다도 옮길 선택요소인 태그가 after(), before()의 괄호안에 위치한다는 점입니다. 이점 꼭 기억하시기 바랍니다.
$('기준이 되는 요소').after('이동할 요소');
$('기준이 되는 요소').before('이동할 요소');
사용방법은 위와 같으며 기준이 되는 요소의 앞 또는 뒤에 이동할 요소가 옮겨지게 됩니다. 그럼 좀 더 자세히 알아보기 위해 아래 예제를 참고해보세요.
[ 1 ] before() 예제 알아보기
; 만약 연속된 3개의 요소가 있다고 합니다. 맨 뒤의 요소를 맨 앞으로 이동시키려면 어떻게 해야할까요? before() 메소드를 사용하면 가능합니다.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
$("#testBefore").click(function() {
});
// id값 test3인 요소를 test1의 앞으로 이동시킴
</script>
</html>
1
2
3
[ 2 ] after() 예제 알아보기
; 위 예제와는 달리 연속된 3개의 요소의 맨 앞의 요소를 맨 뒤로 이동시키기 위해 after() 메소드를 사용합니다.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
$("#testAfter").click(function() {
});
// id값 test1인 요소를 test3의 뒤로 이동시킴
</script>
</html>
1
2
3
여기서 가장 주의할 점은 무엇보다도 옮길 선택요소인 태그가 after(), before()의 괄호안에 위치한다는 점입니다. 이점 꼭 기억하시기 바랍니다.
아래의 글도 찾고 계시지 않나요?
